<template>
  <div>
    <el-row class="titleUrl">
      <el-col class="title" :span="24">
        <div class="titleImg">
          <img v-imgerror="require('@/assets/bg3.png')" :src="avatar" />
          <div>
            <h2>{{ text }}！！！{{ name }}，加油奋斗</h2>
            <h3>{{ text }}！！！{{ name }}，加油奋斗</h3>
          </div>
        </div>
        <div>
          <h1>{{ dayText }}</h1>
        </div>
      </el-col>
    </el-row>
    <el-row class="content">
      <el-col ref="price" :span="12">
        <div>111</div>
      </el-col>
      <el-col :span="12">2</el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name", "avatar"]),
  },
  data() {
    return {
      // 获取时间
      time: new Date().getHours(),
      week: new Date().getDay(),
      text: "",
      dayText: "",
    };
  },
  created() {
    this.getHoursFn();
    this.getDayFn();
    this.priceFn();
  },
  methods: {
    // 设置时间段
    getHoursFn() {
      if (this.time >= 0 && this.time <= 6) {
        this.text = "凌晨好";
      } else if (this.time > 6 && this.time < 11) {
        this.text = "早上好";
      } else if (this.time >= 11 && this.time <= 14) {
        this.text = "中午好";
      } else if (this.time > 14 && this.time < 18) {
        this.text = "下午好";
      } else if (this.time >= 18 && this.time <= 24) {
        this.text = "晚上好";
      }
    },
    getDayFn() {
      const day = [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      day.forEach((item, index) => {
        if (index === this.week) {
          this.dayText = item;
        }
      });
    },
    // 动态图
    priceFn() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "价格数量分布",
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "商品", "公寓", "学区"],
            ["Matcha Latte", 43.3, 85.8, 93.7],
            ["Milk Tea", 83.1, 73.4, 55.1],
            ["Cheese Cocoa", 86.4, 65.2, 82.5],
            ["Walnut Brownie", 72.4, 53.9, 39.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  .el-col {
    margin: 10px;
    background-color: aqua;
  }
}
.title {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  .titleImg {
    display: flex;
    img {
      width: 70px;
      height: 90px;
      border-radius: 50%;
      margin-right: 20px;
    }
  }
}
</style>